{include file="common/head"/}
<style>
    .layui-breadcrumb > * {
        font-size: 18px;
        font-weight: 300;
    }
</style>
<div style="margin: 15px;" class="fadeInUp animated"  ng-app="hd" ng-controller="ctrl">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>
            <!-- <a href="{:url('list')}"> 素材列表</a> > {$title}  -->
            <span class="layui-breadcrumb">
                <a href="{:url('list')}"><i class="layui-icon layui-icon-upload-circle"></i> 素材列表</a>
                <a><cite>{$title}</cite></a>
            </span>
        </legend>
       
    </fieldset>
    <div class="layui-tab" lay-filter="filter">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="one">基础信息</li>
            <li lay-id="two">图片素材</li>
            <li lay-id="three">视频素材</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" >
                <fieldset class="layui-elem-field">
                    <legend>基础信息</legend>
                    <form class="layui-form layui-form-pane" lay-filter="baseInfo" style="margin: 12px;">
                        <div class="layui-form-item">
                            <label class="layui-form-label">素材类型</label>
                            <div class="layui-input-inline">
                                <select name="type"  lay-filter="type" id="type" lay-verify="required">
                                    <option value="">请选择栏目</option>
                                    {volist name="material_type" id="vo"}
                                    <option value="{$key}" {if $baseInfo.type == $key}selected{/if}>{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">素材标题</label>
                            <div class="layui-input-4">
                                <input type="text" name="title" lay-verify="required" value="{{field.title}}" placeholder="{:lang('pleaseEnter')}素材标题" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">封面图片</label>
                            <input type="hidden" name="cover" id="pic" lay-verify="required" value="{{field.cover}}">
                            <div class="layui-input-block">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn layui-btn-primary" id="adBtn"><i
                                            class="icon icon-upload3"></i>点击上传</button>
                                    <div class="layui-upload-list">
                                        <img class="layui-upload-img" id="adPic">
                                        <p id="demoText"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">文字描述</label>
                            <div class="layui-input-block">
                                <textarea name="desc" id="desc" class="layui-textarea">{{field.desc}}</textarea>
                            </div>
                        </div>
    
                        <input type="hidden" name="id" id="id" value="{{field.id}}" />
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="button" class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                                <a href="{:url('list')}" class="layui-btn layui-btn-primary">返回</a>
                            </div>
                        </div>
                    </form>
                </fieldset>
            </div>
           
            <div class="layui-tab-item"> <!-- 图片 -->
                {if $pic}
                <fieldset class="layui-elem-field">
                    <legend>图片素材</legend>
                    <div class="layui-field-box" style="text-align: center;width: 50%;">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150">
                                <col width="100">
                            </colgroup>
                            <thead><tr><th style="text-align: center">缩略图</th><th style="text-align: center">操作</th></tr></thead>
                            <tbody id="two_tbody">
                            {foreach $pic as $key=>$value}
                            <tr><td><img src="{$value['url']}"><br />{$value['title']}</td><td><button class="layui-btn layui-btn-xs layui-btn-danger base-pic-delete" data-imgid="{$value['id']}">删除</button></td></tr>
                            {/foreach}
                            </tbody>
                        </table>
                    </div>
                </fieldset>
                {/if}
                <fieldset class="layui-elem-field">
                    <legend>添加图片</legend>
                    <div class="layui-field-box">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn layui-btn-normal" id="testList"><i class="layui-icon layui-icon-picture"></i>选择多文件</button>
                            <button type="button" class="layui-btn" id="testListAction"><i class="layui-icon"></i>开始上传</button>
                            <div class="layui-upload-list">
                                <table class="layui-table">
                                    <thead>
                                    <tr><th>文件名</th>
                                        <th>大小</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr></thead>
                                    <tbody id="demoList"></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>

            <div class="layui-tab-item"> <!-- 视频 -->
                <fieldset class="layui-elem-field">
                    <legend>视频素材</legend>
                    <div class="layui-field-box">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="video"><i class="layui-icon"></i>上传视频 （限制20MB 以内）</button>
                            <div class="layui-upload-list" id="video_box">
                                {if $video}
                                <video height="300"  controls="controls" autobuffer="autobuffer" loop="loop">
                                    <source src="{$video.url}" type="video/mp4"></source>
                                </video>
                                {/if}
                            </div>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>
{include file="common/foot"/}
<script src="/static/common/js/angular.min.js"></script>
<script src="/static/common/js/jquery.2.1.1.min.js"></script>
<script>
    var m = angular.module('hd',[]);
    var baseInfoId = 0;
    m.controller('ctrl',['$scope',function($scope) {
        $scope.field = '{$info|raw}'!='null'?{$info|raw}:{id:'',title:'',sort:50,pic:''};
        baseInfoId = $scope.field.id;
        layui.use(['form', 'layer','upload','laydate','element','table'], function () {
            var form = layui.form, $ = layui.jquery, upload = layui.upload,laydate = layui.laydate, element = layui.element, table = layui.table;

            // 保存
            element.on('tab(filter)', function(data){
                if(data.index > 0){
                    if(baseInfoId == 0){
                        layer.msg('请先保存基础信息!', { time: 1800, icon: 2 });
                        element.tabChange('filter', 'one');
                    }
                    else{
                        return false;
                    }
                }
            });
            if($scope.field.cover){
                adPic.src = $scope.field.cover;
            }

            // 保存基本信息
            form.on('submit(submit)', function (data) {
                // 提交到方法 默认为本身
                data.field.id = $scope.field.id;
                var loading = layer.load(1, {shade: [0.1, '#fff']});
                $.post("", data.field, function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        layer.msg(res.msg, {time: 1800, icon: 1});
                        form.render();
                        baseInfoId = res.id
                        element.tabChange('filter', 'two');
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            });
            
            // 图片删除
            $("body").on('click','.base-pic-delete',function () {
                var id = $(this).data('imgid');
                var obj = $(this);
                var loading = layer.load(1, {shade: [0.1, '#fff']});
                $.post("delImg", {id:id}, function (res) {
                    layer.close(loading);
                    if (res.code > 0) {
                        obj.parent().parent().remove();
                        layer.msg(res.msg, {time: 1800, icon: 1});
                    } else {
                        layer.msg(res.msg, {time: 1800, icon: 2});
                    }
                });
            });

            //视频上传
            upload.render({
                elem: '#video'
                ,url: '' //上传接口
                ,accept: 'video' //视频
                ,size: 20*1024 //单位 KB
                ,before: function(obj){
                    this.url = '{:url("material_article/uploads")}?id=' + baseInfoId + "&type=5"
                }
                ,done: function(res){
                    if (res.code == 0) {
                        layer.msg('上传成功');
                        $("#video_box").empty();
                            sourceDom = $('<video id="videoid" height="300" controls="controls" autoplay="autoplay"><source src="'+ res.file +'"></video>');
                        $("#video_box").append(sourceDom);
                        $("#video_box").show();
                        // 自动播放
                        $("#video_box video")[0].play()
                    }
                    else{
                        layer.msg('上传失败');
                        console.log(res)
                    }
                }
            });

            //多文件列表示例
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: ''
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,before: function(obj){
                    this.url = '{:url("material_article/uploads")}?id=' + baseInfoId
                },choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img"><br />' + file.name + '</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.file){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        var str = '<tr><td><img src="'+res.file+'"></td><td><button class="layui-btn layui-btn-xs layui-btn-danger base-pic-delete" data-imgid="'+res.id+'">删除</button></td></tr>';
                        $("#two_tbody").append(str);
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#adBtn'
                , url: '{:url("UpFiles/upload")}'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#adPic').attr('src', result); //图片链接（base64）
                    });
                },
                done: function (res) {
                    if (res.code > 0) {
                        $('#pic').val(res.url);
                    } else {
                        //如果上传失败
                        return layer.msg('上传失败');
                    }
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    }]);
</script>